<template>
  <div class="wrapper">
    <Row :gutter="42">
      <Col span="8">
      <div class="card-area">
        <div class="title">{{ $t('promote.open_commission') }}</div>
        <div class="time-head">
          <div class="left">7{{ $t('user.sky') }}</div>
          <div class="right">
            <span class="currency">{{ userCurrency }}</span>
            <span class="big-text">{{ infoData.last7DaysUnSettleCommission || 0 }}</span>
          </div>
        </div>
        <bar-com class="bar-area" :data="sevDayData" :categoryData="categoryData" :colorDate="colorDate"
          id="activityId"></bar-com>
      </div>
      </Col>
      <Col span="8">
      <div class="card-area">
        <div class="title">{{ $t('personal.ShippingFees') }}</div>
        <div class="sub-title sub-head">
          {{ $t('promote.gray_sub_tit_card') }}
          <span class="date-text">
            {{ infoData.latestIncomeTimeStr ? infoData.latestIncomeTimeStr : '' }}
          </span>
        </div>
        <div class="com-num">
          {{ infoData.latestIncomeAmount }}
          <span>{{ userCurrency }}</span>
        </div>
        <div class="sub-title sub-head" style="margin-top: 32px;">
          {{ $t('promote.gray_third_tit_card') }}
        </div>
        <div class="com-num">
          {{ infoData.totalIncomeCount }}
        </div>
      </div>
      </Col>
      <Col span="8">
      <div class="card-area">
        <div class="title">{{ $t('promote.accumulated_freight_commission') }}</div>
        <div class="sub-title">
          {{ $t('promote.fre_card_title') }}</div>
        <div class="com-num">
          {{ infoData.cumulativeIncome }}
<!--          <span>{{ userCurrency }}</span>-->
          <span>CNY</span>
        </div>
        <div class="sub-title sub-head" :style="{ marginTop: this.$t('interval.height') }">
          {{ $t('promote.current_month') }}
          <span class="date-text">
            {{ $t('promote.com_with_before_month') }}
            <span style="text-wrap: nowrap;">
              <Icon :type="iconType" class="trend-icon" :color="iconColor" />
              <span :style="{ color: iconColor }">{{ infoData.percentageChangeForMonth }}%</span>
            </span>
          </span>
        </div>
        <div class="com-num">
          {{ infoData.last30DaysIncome || 0 }}
<!--          <span>{{ userCurrency }}</span>-->
          <span>CNY</span>
        </div>
      </div>
      </Col>
    </Row>
    <brokerage-com :flowData="flowData"></brokerage-com>
    <commission-detail :columns="columns" :data="tableData" :tableTit="tableTit" :selData="selData"
      @changeTab="changeTab" :allPage="allPage" :currentPage="currentPage" @updateMet="updateMet"></commission-detail>
  </div>
</template>
<script>
import { mapState } from "vuex";
import dayjs from "dayjs";
import 'dayjs/locale/en'; // 引入dayjs的英文语言包
import { getCommissionStatInfo, getPageCommissionDetail } from "@/api/invite";
import brokerageCom from './components/brokerage-Com.vue'
import CommissionDetail from './components/commission-detail.vue';
import BarCom from './components/bar-Com.vue';

export default {
  components: { brokerageCom, CommissionDetail, BarCom },
  props: {

  },
  data() {
    return {
      flowData: [
        { id: 1, imgUrl: require('@/assets/images/promote/bonus_flow1.png'), subTitle: this.$t('promote.status_check_pending'), desc: this.$t('promote.status_check_pending_desc') },
        { id: 2, imgUrl: require('@/assets/images/promote/bonus_flow2.png'), subTitle: this.$t('promote.status_funds_recorded'), desc: this.$t('promote.status_funds_recorded_desc') },
        { id: 3, imgUrl: require('@/assets/images/promote/bonus_flow3.png'), subTitle: this.$t('promote.status_unapproved'), desc: this.$t('promote.status_unapproved_desc') }
      ],
      infoData: {},
      tableData: [],
      tableTit: this.$t('promote.event_table_tit'),
      selData: [
        { name: this.$t('user.all'), isActive: true },
        { name: this.$t('promote.status_funds_recorded'), isActive: false },
        { name: this.$t('promote.status_check_pending'), isActive: false },
        { name: this.$t('promote.status_unapproved'), isActive: false }],
      columns: [
        {
          title: this.$t('user.tradingTime'),
          key: 'tradeTime',
          width: 240,
          fixed: 'left',
          align: 'center'
        },
        {
          title: this.$t('user.status'),
          key: 'status',
          width: 240,
          align: 'center',
          render: (h, params) => {
            let statusText = '';
            let statusColor = '';
            switch (params.row.status) {
              case 0:
                statusText = this.$t('promote.status_check_pending');
                statusColor = '#FF9727';
                break;
              case 1:
                statusText = this.$t('promote.status_funds_recorded');
                statusColor = '#35DAA9';
                break;
              case 2:
                statusText = this.$t('promote.status_unapproved');
                statusColor = '#FF5D5D';
                break;
              default:
                statusText = '';
                statusColor = 'black';
            }
            return h('span', {
              style: {
                color: statusColor
              }
            }, statusText);
          }
        },
        {
          title: this.$t('user.settlementDate'),
          key: 'settleDate',
          width: 240,
          align: 'center'
        },
        {
          title: this.$t('promote.yel_tit_card'),
          key: 'commissionAmount',
          width: 240,
          align: 'center',
          render: (h, params) => {
            return h('div', {
              style: {
                color: '#FF186B'
              }
            }, `CNY ${params.row.commissionAmount}`);
          }
        },
        {
          title: this.$t('promote.commission_rate_tit'),
          key: 'commissionRate',
          width: 240,
          align: 'center',
          render: (h, params) => {
            if (params.row.commissionRate === null) {
              return null;
            }
            return h('div', `${params.row.commissionRate}%`);
          }
        },
        {
          title: this.$t('pay.remark'),
          key: 'remark',
          width: 600,
          align: 'center'
        }
      ],
      form: {
        commissionType: 'SHARE_REWARD',
        pageNo: 1,
        pageSize: 7
      },
      categoryData: [],
      sevDayData: [],
      colorDate: [],
      allPage: 0,//总页数
      currentPage: 1,//当前页
    }
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
      userCurrency: (state) => {
        return state.user.userCurrency.code;
      }
    }),
    iconType() {
      return this.infoData.percentageChangeForMonth < 0 ? 'md-trending-down' : 'md-trending-up';
    },
    iconColor() {
      return this.infoData.percentageChangeForMonth < 0 ? '#FF4D50' : '#49BC19'
    }
  },
  created() {
    this.getData();
    this.getTable();
  },
  methods: {
    getData() {
      getCommissionStatInfo({ commissionType: 'SHARE_REWARD' }).then(res => {
        this.infoData = res.result;
        if (this.infoData.last7DaysUnSettleList !== null) {
          this.colorDate = ['#F79831'];//有值的颜色
          this.infoData.last7DaysUnSettleList.forEach((item) => {
            let date = new Date(item.dateTime * 1000);
            let weekDay = date.getDay();
            let weekDayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
            let shortWeekDay = weekDayNames[weekDay].substring(0, 2);
            this.categoryData.push(shortWeekDay);
            // 根据item.firstLevelCommission的值显示不同柱体颜色
            let color = item.firstLevelCommission > 0 ? '#F79831' : '#EBEFF4';
            let newItem = {
              value: item.firstLevelCommission,
              itemStyle: {
                color: color
              }
            };
            this.sevDayData.push(newItem);
          });
        } else {
          this.colorDate = ['#EBEFF4'];//没值的颜色
          // 没值的情况
          dayjs.locale('en'); // 设置dayjs为英文环境
          const today = dayjs();
          for (let i = 0; i < 7; i++) {
            const day = today.subtract(i, 'day');
            const weekDay = day.format('ddd').substring(0, 2);
            this.categoryData.push(weekDay);
          }
          // 反转数组，使得顺序是从前往后（过去到现在）
          this.categoryData.reverse();
          let dataArr = [0, 0, 0, 0, 0, 0, 0];
          dataArr.forEach((item) => {
            let newItem = {
              value: item,
              itemStyle: {
                color: '#EBEFF4'
              }
            };
            this.sevDayData.push(newItem);
          })
        }
      })
    },
    getTable() {
      getPageCommissionDetail(this.form).then(res => {
        this.tableData = res.result.records;
        this.allPage = res.result.pages;
        this.currentPage = res.result.current;
        this.allAmount = res.result.total;
      })
    },
    // tab切换
    changeTab(name) {
      this.currentPage = 1;//重置当前页
      this.form.pageNo = 1;//重置查询页
      this.selData.forEach((item) => {
        if (item.name == name) {
          item.isActive = true
        } else {
          item.isActive = false
        }
      });

      if (name == this.$t('promote.status_check_pending')) {
        this.form.status = 0;
      } else if (name == this.$t('promote.status_funds_recorded')) {
        this.form.status = 1;
      } else if (name == this.$t('promote.status_unapproved')) {
        this.form.status = 2;
      } else {
        delete this.form.status;
      }
      this.getTable();
    },
    // 分页
    updateMet(val) {
      this.form.pageNo = val;
      this.getTable();
    }
  }
}
</script>
<style lang="less" scoped>
.wrapper {
  font-family: Open Sans, Open Sans;

  .card-area {
    min-height: 386px;
    max-height: 386px;
    background: #FFFFFF;
    border-radius: 16px 16px 16px 16px;
    border: 1px solid #E8E8E8;
    padding: 32px 40px;
    margin-top: 32px;

    .title {
      font-weight: 600;
      font-size: 22px;
      color: #1E1714;
      line-height: 26px;
      margin-bottom: 36px;
    }

    .time-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: PingFang SC, PingFang SC;
      margin-top: 43px;

      .left {
        font-weight: 400;
        font-size: 20px;
        color: #767B93;
        line-height: 23px;
      }

      .right {
        color: #1E1714;

        .currency {
          font-weight: 600;
          font-size: 16px;
          line-height: 19px;
        }

        .big-text {
          font-family: Open Sans, Open Sans;
          font-weight: 600;
          font-size: 24px;
          color: #1E1714;
          line-height: 28px;
        }
      }
    }

    .bar-area {
      width: 100%;
      height: 220px;
    }

    .sub-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 20px;
      color: #767B93;
      line-height: 23px;
      margin-bottom: 5px;

      .tip-icon {
        cursor: pointer;
      }
    }

    .sub-head {
      width: 100%;
      display: inline-flex;
      justify-content: space-between;
      align-items: center;
    }

    .com-num {
      font-family: Open Sans, Open Sans;
      font-weight: bold;
      font-size: 48px;
      color: #F79831;
      line-height: 56px;
      text-wrap: nowrap;
      margin-top: 9px;

      span {
        font-size: 23px;
        line-height: 27px;
      }
    }
  }
}
</style>
